<template>
    <div>
    <div class="outmain ba_f formwidth">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础设置" name="1">
          <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
              <span>基础设置</span>
            </div>
          </div>
          <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="180px" class="mar_t20">
              <el-form-item label="当前公众号uniacid">
                  <el-input v-model="form.uniacid" disabled></el-input>
              </el-form-item>
              <!--                <el-form-item label="公众号名称" prop="name">-->
              <!--                    <el-input v-model="form.name" placeholder="请输入公众号名称"></el-input>-->
              <!--                </el-form-item>-->
              <!--                <el-form-item label="原始ID" prop="originalAppId">-->
              <!--                    <el-input v-model="form.originalAppId" placeholder="请输入originalAppId"></el-input>-->
              <!--                </el-form-item>-->
              <el-form-item label="公众号AppId" prop="appId">
                <el-input v-model="form.appId" placeholder="请输入appId"></el-input>
              </el-form-item>
              <el-form-item label="公众号AppSecret"  prop="appSecret">
                <el-input v-model="form.appSecret" placeholder="请输入appSecret"></el-input>
              </el-form-item>
              <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                  <span>支付设置</span>
                </div>
              </div>
              <el-form-item label="微信支付">
                <el-radio-group v-model="form.wechatPay">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="2">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="支付宝支付">
                <el-radio-group v-model="form.ailiPay">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="2">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="访问预览" name="2">
          <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
              <span>访问预览</span>
            </div>
          </div>
          <el-form ref="form2" :model="form2"  label-width="180px" class="mar_t20">
            <el-form-item label="首页链接">
              <div class="flex">
                <div>{{ url }}</div>
                <div class="flex mar_l20">
                  <div class="lllx mar_r10">
                    <el-button
                        size="mini"
                        @click="copyText(url)">复制链接
                    </el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="首页二维码">
              <div class="pad_20">
                <vue-qr
                        :size="191"
                        :margin="0"
                        :auto-color="true"
                        :dot-scale="1"
                        :text="url" />
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
<!--            <el-tab-pane label="支付设置" name="2">-->
<!--                <el-form ref="form" :model="form" label-width="180px" class="mar_t20">-->
<!--                    <div class="maintitle">微信支付设置</div>-->
<!--                    <el-form-item label="微信支付">-->
<!--                        <div>在「公众号后台 - 微信支付」页面下申请开通并完成相关配置。 完成后，请在本页填写你的商户号和商户密钥。</div>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="商户号">-->
<!--                        <el-input v-model="form.name"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="商户秘钥">-->
<!--                        <el-input v-model="form.name"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button>去修改</el-button>-->
<!--                    </el-form-item>-->
<!--                    <div class="maintitle">微信退款设置</div>-->
<!--                    <el-form-item label="微信退款">-->
<!--                        <div>目前公众号只支持微信自有支付，你可以在「微信支付商户平台」下载证书，上传文件类型限.pem文件</div>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="退款证书cert">-->
<!--                        <div class="subjectcolor2">未上传</div>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="退款证书key">-->
<!--                        <div class="subjectcolor2">已上传</div>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button>去修改</el-button>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--            </el-tab-pane>-->
    </div>
        <div class="mar_t20 ba_f pad_20 t_c" v-if="activeName=='1'">
            <el-button type="primary" @click="onSubmit()">保存</el-button>
        </div>
    </div>
</template>
<script>
import {getConfig, postConfig, getPage, getCode} from "@/api/setup";
    import index from "@/api";
    import VueQr from 'vue-qr';
    export default {
      components: {
        VueQr,
      },

      created() {
            this.bus.$emit('loading', true);
            this.init();
            // const publishUrl = 'https://bkycms.com/addons/yb_wm/views/cashier/index.html';
            // this.url = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + 'views/cashier/index.html';
            // console.log(this.url);
        },
        data() {
            return {
                activeName:'1',
                form: {
                    uniacid:'',
                    appId: '',
                    appSecret: '',
                    wechatPay: '2',
                    ailiPay: '2',
                },
                form2: {
                    name: '',
                },
                url:'',
                codeimg:'',
                rules: {
                    // name: [
                    //     {required: true, message: '请输入公众号名称', trigger: 'blur'},
                    // ],
                    // originalAppId: [
                    //     {required: true, message: '请输入originalAppId', trigger: 'blur'},
                    // ],
                    appId: [
                        {required: true, message: '请输入AppId', trigger: 'blur'}
                    ],
                    appSecret: [
                        {required: true, message: '请输入appSecret', trigger: 'blur'}
                    ]
                },
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
            }
        },
        methods: {
          async handleClick() {
            if (this.activeName == '1') {
              this.formData()
            } else if (this.activeName == '2') {
              this.formData()
            }
          },
            handleEditClick(url) {
              // window.open(url, '_blank');
            },
            async getCode() {
              const {data} = await getCode({ident: 'couponCenterDl', page: `yb_wm/my/coupon/coupon-dl`});
              this.codeimg = data ? data : ''
            },
            async init() {
                this.formData()
            },
            async formData(){
                const {data} = await getConfig({ident: 'wechatConfig'});
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                this.url = data.url
                this.bus.$emit('loading', false)
            },
            copyText(row){
              let Url2 = row;
              var oInput = document.createElement('input');
              oInput.value = Url2;
              console.log(oInput.value);
              document.body.appendChild(oInput);
              oInput.select();
              document.execCommand("Copy");
              oInput.className = 'oInput';
              oInput.style.display='none';
              this.$message({
                message: '复制成功',
                type: 'success'
              });
            },
            async onSubmit() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.ident = 'wechatConfig'
                        this.form.identName = '公众号配置'
                        const {msg} = await postConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>
